<template>
  <div v-if="System">
    <Title class="title" title="系统相关"></Title>
    <ul class="system">
      <li><span class="bt">硬件配置</span>
        local
        <span class="iconfont icon-CPU"></span>
        {{ System.NCPU }}
        <span class="iconfont icon-neicuntiao"></span>
        {{ Math.round(System.MemTotal / 100000000) / 10 }} GB - Standalone {{ System.ServerVersion }}
      </li>
      <li><span class="bt">根目录</span>{{ System.DockerRootDir }}</li>
      <li><span class="bt">系统</span>{{ System.OperatingSystem }}</li>
    </ul>
    <Title class="title" title="数量"></Title>
    <ul class="itemBox">
      <router-link tag="li" class="item" :to="item.link" v-for="item in navList" :key="item.link">
        <div v-if="item.title !== '总览'">
          <van-icon class="icon" :name="item.icon" />
          <p>{{item.title}}</p>
          <h5>{{num(item.title)}}</h5>
        </div>
      </router-link>
    </ul>
  </div>
  <div v-else>
    <van-empty description="数据请求失败！" />
  </div>
</template>

<script>
import navList from '@/router/tabbar.js'
import Vue from 'vue'
import { Icon } from 'vant'
import Title from '@/components/Title'

Vue.use(Icon)
export default {
  data () {
    return {
      System: null,
      navList: navList
    }
  },
  mounted () {
    const parse = {
      data: {
        docker: 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
      }
    }
    this.$post(parse, res => {
      this.System = JSON.parse(res)
    })
  },
  methods: {
    num (title) {
      if (title === '容器') {
        return this.System.Containers
      } else if (title === '镜像') {
        return this.System.Images
      } else if (title === '集群') {
        const userNum = JSON.parse(localStorage.getItem('userList')).length
        return userNum
      }
    }
  },
  components: {
    Title
  }
}
</script>

<style lang="scss" scoped>
.title{
  margin-top: vw(73);
  margin-left: vw(42);
}
.system{
  margin: vw(43) vw(42);
  border: 1px solid #EFEFEF;
  border-radius: vw(25);
  padding: vw(10) vw(62);
  box-shadow: $yinying;
  li{
    line-height: vw(88);
    font-size: vw(22);
    .bt{
      display: inline-block;
      width: vw(130);
    }
  }
}
.itemBox{
  padding-right: vw(42);
  display: flex;
  justify-content: space-between;
  padding-top: vw(20);
  .item{
    width: 28%;
    border: 1px solid #f2f2f2;
    border-radius: vw(5);
    border-radius: vw(25);
    box-shadow: $yinying;
    div{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: vw(20);
      color: #898989;
      .icon{
        font-size: vw(78);
      }
      p{
        font-size: vw(24);
        line-height: vw(60);
      }
      h5{
        font-size: vw(50);
        color: $color;
      }
    }
    &:nth-child(1){
      width: 0;
      border: none;
    }
  }
}
</style>
